<template>
    <view class="u-popup">
        <u-overlay :show="show" @click="overlayClick" v-if="overlay" :duration="overlayDuration" :customStyle="overlayStyle" :opacity="overlayOpacity"></u-overlay>
        <u-transition :show="show" :customStyle="transitionStyle" :mode="position" :duration="duration" @afterEnter="afterEnter" @click="clickHandler">
            <view class="u-popup__content" scroll-y="true" :style="[contentStyle]" @tap.stop="noop">
                <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
                <slot></slot>
                <view
                    v-if="closeable"
                    @tap.stop="close"
                    class="u-popup__content__close"
                    :class="['u-popup__content__close--' + closeIconPos]"
                    hover-class="u-popup__content__close--hover"
                    hover-stay-time="150"
                >
                    <u-icon name="close" color="#909399" size="18" bold></u-icon>
                </view>
                <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
            </view>
        </u-transition>
    </view>
</template>

<script>
import props from './props.js';

/**
 * popup 弹窗
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
 * @tutorial https://www.uviewui.com/components/popup.html
 * @property {Boolean}			show				是否展示弹窗 (默认 false )
 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
 * @property {String}			mode				弹出方向（默认 'bottom' ）
 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
 * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
 * @property {Object | String}	overlayStyle		自定义遮罩的样式
 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
 * @property {String | Number}	zIndex				层级 （默认 10075 ）
 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
 * @property {String | Number}	round				圆角值（默认 0）
 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
 * @property {Object}			customStyle			组件的样式，对象形式
 * @event {Function} open 弹出层打开
 * @event {Function} close 弹出层收起
 * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
 */
export default {
    name: 'u-popup',
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
    data() {
        return {
            overlayDuration: this.duration + 50
        };
    },
    watch: {
        show(newValue, oldValue) {
            if (newValue === true) {
                // #ifdef MP-WEIXIN
                const children = this.$children;
                this.retryComputedComponentRect(children);
                // #endif
            }
        }
    },
    computed: {
        transitionStyle() {
            const style = {
                zIndex: this.zIndex,
                position: 'fixed',
                display: 'flex'
            };
            style[this.mode] = 0;
            if (this.mode === 'left') {
                return uni.$u.deepMerge(style, {
                    bottom: 0,
                    top: 0
                });
            } else if (this.mode === 'right') {
                return uni.$u.deepMerge(style, {
                    bottom: 0,
                    top: 0
                });
            } else if (this.mode === 'top') {
                return uni.$u.deepMerge(style, {
                    left: 0,
                    right: 0
                });
            } else if (this.mode === 'bottom') {
                return uni.$u.deepMerge(style, {
                    left: 0,
                    right: 0
                });
            } else if (this.mode === 'center') {
                return uni.$u.deepMerge(style, {
                    alignItems: 'center',
                    'justify-content': 'center',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                });
            }
        },
        contentStyle() {
            const style = {};
            // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
            // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
            const { safeAreaInsets } = uni.$u.sys();
            if (this.mode !== 'center') {
                style.flex = 1;
            }
            // 背景色，一般用于设置为transparent，去除默认的白色背景
            if (this.bgColor) {
                style.backgroundColor = this.bgColor;
            }
            if (this.round) {
                const value = uni.$u.addUnit(this.round);
                if (this.mode === 'top') {
                    style.borderBottomLeftRadius = value;
                    style.borderBottomRightRadius = value;
                } else if (this.mode === 'bottom') {
                    style.borderTopLeftRadius = value;
                    style.borderTopRightRadius = value;
                } else if (this.mode === 'center') {
                    style.borderRadius = value;
                }
            }
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
        },
        position() {
            if (this.mode === 'center') {
                return this.zoom ? 'fade-zoom' : 'fade';
            }
            if (this.mode === 'left') {
                return 'slide-left';
            }
            if (this.mode === 'right') {
                return 'slide-right';
            }
            if (this.mode === 'bottom') {
                return 'slide-up';
            }
            if (this.mode === 'top') {
                return 'slide-down';
            }
        }
    },
    methods: {
        // 点击遮罩
        overlayClick() {
            if (this.closeOnClickOverlay) {
                this.$emit('close');
            }
        },
        close(e) {
            this.$emit('close');
        },
        afterEnter() {
            this.$emit('open');
        },
        clickHandler() {
            // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
            if (this.mode === 'center') {
                this.overlayClick();
            }
            this.$emit('click');
        },
        // #ifdef MP-WEIXIN
        retryComputedComponentRect(children) {
            // 组件内部需要计算节点的组件
            const names = [
                'u-calendar-month',
                'u-album',
                'u-collapse-item',
                'u-dropdown',
                'u-index-item',
                'u-index-list',
                'u-line-progress',
                'u-list-item',
                'u-rate',
                'u-read-more',
                'u-row',
                'u-row-notice',
                'u-scroll-list',
                'u-skeleton',
                'u-slider',
                'u-steps-item',
                'u-sticky',
                'u-subsection',
                'u-swipe-action-item',
                'u-tabbar',
                'u-tabs',
                'u-tooltip'
            ];
            // 历遍所有的子组件节点
            for (let i = 0; i < children.length; i++) {
                const child = children[i];
                // 拿到子组件的子组件
                const grandChild = child.$children;
                // 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
                if (names.includes(child.$options.name) && typeof child?.init === 'function') {
                    // 需要进行一定的延时，因为初始化页面需要时间
                    uni.$u.sleep(50).then(() => {
                        child.init();
                    });
                }
                // 如果子组件还有孙组件，进行递归历遍
                if (grandChild.length) {
                    this.retryComputedComponentRect(grandChild);
                }
            }
        }
        // #endif
    }
};
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';
$u-popup-flex: 1 !default;
$u-popup-content-background-color: #fff !default;

.u-popup {
    flex: $u-popup-flex;
	z-index: 999;

    &__content {
        background-color: $u-popup-content-background-color;
        position: relative;

        &--round-top {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        &--round-left {
            border-top-left-radius: 0;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 10px;
        }

        &--round-right {
            border-top-left-radius: 10px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 0;
        }

        &--round-bottom {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &--round-center {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        &__close {
            position: absolute;

            &--hover {
                opacity: 0.4;
            }
        }

        &__close--top-left {
            top: 15px;
            left: 15px;
        }

        &__close--top-right {
            top: 15px;
            right: 15px;
        }

        &__close--bottom-left {
            bottom: 15px;
            left: 15px;
        }

        &__close--bottom-right {
            right: 15px;
            bottom: 15px;
        }
    }
}
</style>
